<template>
	<view class="add-address">
		<TopBar :indexflag="true" :combakflag="true" :lang="false" :bottom="true" title="添加地址"
			barstyle="background-color:rgba(0,0,0,0)"></TopBar>
		<HeaderTitle :title="$t('AddAddress')" :bottom="true" :lang="false" :mobile="false" :combakflag="true"></HeaderTitle>
		<div :class="i18nLocale=='ug'?'from-box ug-from':'from-box'">
			<u--form labelPosition="left" :model="adderss" ref="uForm" labelWidth="100">
				<u-form-item :label="$t('Address')" borderBottom ref="item1" @click="selecetaddress">
					<u--input v-if="i18nLocale=='ug'" :value="mapaddress.ug_name" disabledColor="#ffffff"
						:placeholder="$t('SelecetAddress')" border="none" placeholderStyle="color:#45BC1B"
						color="#45BC1B" fontSize="26rpx"></u--input>
					<u--input v-if="i18nLocale=='cn'" :value="mapaddress.cn_name" disabledColor="#ffffff"
						:placeholder="$t('SelecetAddress')" border="none" placeholderStyle="color:#45BC1B"
						color="#45BC1B" fontSize="26rpx"></u--input>
					<u-icon slot="right" name="arrow-right" v-if="i18nLocale=='cn'"></u-icon>
					<u-icon slot="right" name="arrow-left" v-if="i18nLocale=='ug'"></u-icon>
				</u-form-item>
				<u-form-item :label="$t('Family')" borderBottom ref="item1">
					<u--textarea v-model="adderss.userInfo.addressnumber" maxlength="150" border="none"
						:placeholder="$t('DetailAddressPlassholder')" fontSize="26rpx"></u--textarea>
				</u-form-item>
				<u-form-item :label="$t('UserName')" borderBottom ref="item1">
					<u--input v-model="adderss.userInfo.name" border="none" fontSize="26rpx"
						:placeholder="$t('NamePlaceholder')"></u--input>
				</u-form-item>
				<u-form-item :label="$t('UserNumber')" ref="item1">
					<u--input v-model="adderss.userInfo.pone" type="number" border="none" 
						:placeholder="$t('NumberPlaceholder')" fontSize="26rpx"></u--input>
				</u-form-item>
				<u-form-item :label="$t('DefaultAddress')" ref="item1" style="display: flex;justify-content: space-between;" >
					
				<u-switch dir="ltr" v-model="voice" @change="change" activeColor="#45bc1b"></u-switch>
				</u-form-item>
			</u--form>
			
			<u-toast ref="uToast" :message="notmessage"></u-toast>
		</div>
		<div class="save-button" @click="changesave">{{address_id?$t('Edit'):$t('Save')}}</div>
		<Loading :show="loadshow" :text="$t('Loading')"></Loading>
	</view>
</template>

<script>
	import TopBar from "@/components/TopBar.vue"
	import HeaderTitle from "@/components/HeaderTitle.vue"
	import {
		postaddress,
		getaddressone,
		putaddress
	} from '@/api/all.js';

	export default {
		components: {
			TopBar,
			HeaderTitle
		},
		data() {
			return {
				loadshow: false,
				address_list: [],
				mapaddress: '',
				voice: false,
				adderss: {
					userInfo: {
						name: 'DIKIDIKI',
						addressnumber: '',
						pone: '',
					},
				},
				address_id: '',
				notmessage: '请仔细填写!'
			}
		},

		onShow() {
			let addressdata;
			// uni.$on('onBack', (data) => {
			// 	addressdata = JSON.parse(data);
			// 	if (addressdata) {
			// 		this.adderss.userInfo.addres.ugtitle = addressdata.ugtitle;
			// 		this.adderss.userInfo.addres.cntitle = addressdata.cntitle;
			// 		this.adderss.userInfo.addres.location = addressdata.location;
			// 		this.adderss.userInfo.addres.code = addressdata.code;
			// 	}
			// });
		},
		computed: {
			storeValue() {
				return this.$store.state.address;
			},
			i18nLocale() {
				return this.$i18n.locale;
			}
		},
		onLoad(e) {
			uni.setNavigationBarTitle({
			  title: this.$t('AddAddress')
			})
			if (e.id) {
				this.address_id = e.id;
				this.getAddressone(e.id);
			} else {
				this.mapaddress = this.$store.state.address;
			}
		},
		methods: {
			changesave() {
				if (!this.adderss.userInfo.addressnumber) {
					this.$refs.uToast.show({
						top: 0,
						message: this.$t('DetailAddress'),
						color: '#fff',
						bgColor: '#f0ba53'
					});
					return;
				}
				if (!this.adderss.userInfo.pone) {
					this.$refs.uToast.show({
						top: 0,
						message: this.$t('NumberPlaceholder'),
						color: '#fff',
						bgColor: '#f0ba53'
					});
					return;
				}
				if (this.adderss.userInfo.pone && this.adderss.userInfo.addressnumber) {
					if (this.address_id) {
						this.putAddress();
						

					} else {
						this.postAddress();
					}

					return;
				}
			},
			selecetaddress() {
				uni.navigateTo({
					url: '/pages/me/address/selecetaddress'
				})
			},
			postAddress() {
				let useritem = this.$store.state.address;
				console.log(useritem,'++++++')
				postaddress({
					community_id: useritem.id,
					top_id:this.$store.state.top_id,
					area_code: useritem.area_code,
					name: this.adderss.userInfo.name,
					detail: this.adderss.userInfo.addressnumber,
					location: this.$store.state.location,
					mobile: this.adderss.userInfo.pone,
					current:this.voice
				}).then((res) => {
					if (res.code == 200) {
						this.$refs.uToast.show({
							top: 0,
							message: this.$t('AddSucce'),
							color: '#fff',
							bgColor: '#15c45b'
						});
						setTimeout(() => {
							uni.navigateBack({
								delta: 1 // 返回上一级页面
							});
						}, 200)
					}
				})
			},
			getAddressone(id) {
				let that = this;
				that.loadshow = true;
				getaddressone({
					id: id
				}).then((res) => {
					let data = res.body.data;
					this.mapaddress = data.community;
					this.adderss.userInfo.name = data.name;
					this.adderss.userInfo.addressnumber = data.detail;
					this.adderss.userInfo.pone = data.mobile;
					this.voice=data.current;
					that.loadshow = false;
				})
			},
			putAddress() {
				let that=this;
				putaddress({
					id: this.address_id,
					top_id:this.$store.state.address.top_id,
					community_id: this.mapaddress.id,
					area_code: this.mapaddress.area_code,
					name: this.adderss.userInfo.name,
					detail: this.adderss.userInfo.addressnumber,
					location: this.$store.state.location,
					mobile: this.adderss.userInfo.pone,
					current:this.voice
				}).then((res) => {
					// 同步修改确认订单页面
					if (res.code == 200) {
						this.$store.state.useraddress.map(item=>{
							if(item.id==that.address_id){
								item.area_code= that.mapaddress.area_code,
								item.name=that.adderss.userInfo.name,
								item.detail=that.adderss.userInfo.addressnumber,
								item.location= that.$store.state.location,
								item.mobile= that.adderss.userInfo.pone,
								item.current=that.voice
							}
						})
						this.$refs.uToast.show({
							top: 0,
							message: this.$t('EditSucce'),
							color: '#fff',
							bgColor: '#15c45b'
						});
						setTimeout(() => {
							uni.navigateBack({
								delta: 1 // 返回上一级页面
							});
						}, 200)
					}
				})
			},
			change(e) {
				this.voice = e;
			},
			// chooseAddressView() {
			// 	let that = this;
			// 	uni.chooseLocation({
			// 		isHighAccuracy: true,
			// 		type: 'wgs84',
			// 		success: res => {
			// 			that.adderss.userInfo.addres = res.name;
			// 			that.adderss.userInfo.latitude = res.latitude;
			// 			that.adderss.userInfo.longitude = res.longitude;
			// 		}
			// 	});
			// }
		}
	}
</script>

<style lang="scss" scopd>
	.add-address {
		width: 100%;
		height: 100vh;

		.from-box {
			width: 100%;
			display: flex;
			flex-direction: column;
			background-color: #fff;
			padding: 20rpx;
			box-sizing: border-box;
		}

		.save-button {
			width: 90%;
			margin: 100rpx auto;
			background-color: $uni-color-topic;
			color: #fff;
			font-size: $uni-font-size-base;
			padding: 20rpx 0rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: $uni-border-radius-lg;
		}
	}

	/deep/ .u-form-item__body__left__content__label {
		font-size: $uni-font-size-base;
	}

	/deep/ .u-form-item {
		font-size: $uni-font-size-base !important;
	}

	.uni-textarea-compute,
	.uni-textarea-line,
	.uni-textarea-placeholder,
	.uni-textarea-textarea {
		font-size: 26rpx !important;
	}

	.ug-from {
		direction: rtl;

		/deep/ .uni-input-input {
			direction: rtl !important;
			text-align: right;
		}

		/deep/ .uni-input-placeholder {
			text-align: right;
		}
	}
</style>